*{
	padding: 0;
	margin: 0;
}
/**
 * rem 基础值，将750分成10份，每一份1rem = 75px
 */
$baseVal : 750 / 10;
/**
 * px转rem
 * @param {Object} $px
 */
@function pxToRem($px){
	@return $px / $baseVal  *  1rem;
}


.tabbar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	height: pxToRem(100);
	background-color: #FFFFff;
	border-top: 1px solid #eee;
	&__item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
	}
	&__svg{
		display: flex;
		width:pxToRem(48);
		height:pxToRem(48);
		svg{
			width: 100%;
			height: 100%;
		}
	}
	&__name{
		height:pxToRem(30); ;
		padding-top:  pxToRem(4);
		font-size: pxToRem(20);
		transition: color .3s;
		color: #AFB8CC;
		
	}
	.transition_move1,.transition_move2,.transition_move3{
		transform: translate(-50px,50px);
	}
	#home-circle{
	    stroke-dasharray:44 44;
	    stroke-dashoffset:0;
	}
	#explore-arrow{
	    stroke-dasharray:39 39;
	    stroke-dashoffset:0;
	}
	#me-line{
	    stroke-dasharray:23 23;
	    stroke-dashoffset:0;
	}
	#chat-circle1{
		transform-origin: 13px 24px;
	}
	#chat-circle2{
		transform-origin: 25px 24px;
	}
	#chat-circle3{
		transform-origin: 37px 24px;
	}
	.on{
		.tabbar__name{
			color: #698AFF;
		}
		svg{
			animation: heartbeat 1s;
		}
		#home-circle{
			animation: home-circle 1s ease forwards;
		}
		#explore-arrow{
			animation: explore-arrow 1s ease forwards;
		}
		#me-line{
			animation: me-line 1s ease forwards;
		}
		#chat-circle1{
			animation: chat-circle 1s ease forwards;
		}
		#chat-circle2{
			animation: chat-circle 1s .15S  ease forwards;
		}
		#chat-circle3{
			animation: chat-circle 1s .3S ease forwards;
		}
		.transition_move1{animation: transition-move 0.5s 0.3s forwards;}
		.transition_move2{animation: transition-move 0.5s 0.35s forwards;}
		.transition_move3{animation: transition-move 0.5s 0.4s forwards;}
	}
}
/**
 * 心跳动画
 */
@keyframes heartbeat{
	0%{transform: scale(1);}
	20%{transform: scale(0.8);}
	40%{transform: scale(1);}
	60%{transform: scale(0.9);}
	80%,100%{transform: scale(1);}
}
/**
 * 路径动画
 * @params {string} $name 关键帧名字
 * @params {string} $length 路径长度
 * @params {string} $startColor 开始动画路径的颜色
 * @params {string} $endColor 结束动画路径的颜色
 */
@mixin pathKeyframes($name,$length,$startColor:#B1BACD,$endColor:#ffffff) {
	@keyframes #{$name}{
		0%{
			stroke:$startColor;
			stroke-dashoffset:0;
			}
		50%{
			stroke:$startColor;
			stroke-dashoffset:$length;
		}
		50.1%{
			stroke:$endColor;
			stroke-dashoffset:$length*-1;
		}
		100%{
			stroke:$endColor;
			stroke-dashoffset:0;
		}
	}
}
@include pathKeyframes(home-circle,44);
@include pathKeyframes(explore-arrow,39);
@include pathKeyframes(me-line,23);

/*闪屏移动*/
@keyframes transition-move{
	100%{
		transform: translate(0,0);
	}
}

// 尬聊小圆 关键帧
@keyframes chat-circle{
		0%{
			fill:#B1BACD;
			transform: scale(1);
		}
		50%{
			fill:#B1BACD;
			transform: scale(0);
		}
		50.1%{
			fill:#ffffff;
			transform: scale(1) translateY(0);
		}
		60%{
			fill:#ffffff;
			transform: scale(1) translateY(-10px);
		}
		85%{
			fill:#ffffff;
			transform: scale(1) translateY(10px);
		}
		100%{
			fill:#ffffff;
			transform: scale(1) translateY(0);
		}
}